CSS Text

Text Formatting

This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from this colored "Go to a YouTube link".

Text Alignment

Go Back to Top

This paragraph is aligned left.

This paragraph is aligned right.

This paragraph is aligned center.

This paragraph is justified. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Expedita tempore molestias tempora commodi recusandae ratione totam provident officiis odio culpa. Consequatur reprehenderit est dignissimos facere iusto deleniti nulla dolor dolorum!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo consectetur maxime mollitia neque, quisquam accusantium id minus unde dicta amet necessitatibus alias deleniti sint quos iusto sed ratione consequatur fugiat?

This paragraph's last line is aligned to right. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic nostrum atque perferendis magni assumenda illo magnam pariatur. Sequi numquam dolor sint, ad animi tempora earum aperiam. Voluptatibus nesciunt omnis dignissimos.

This paragraph's last line is aligned to center. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic nostrum atque perferendis magni assumenda illo magnam pariatur. Sequi numquam dolor sint, ad animi tempora earum aperiam. Voluptatibus nesciunt omnis dignissimos.

This paragraph's last line is justified. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic nostrum atque perferendis magni assumenda illo magnam pariatur. Sequi numquam dolor sint, ad animi tempora earum aperiam. Voluptatibus nesciunt omnis dignissimos.

This is the default text direction.

This is right-to-left text direction.

An img with a baseline alignment.

An img with a text-top alignment.

An img with a text-bottom alignment.

An img with a sub alignment.

An img with a super alignment.

Text Decoration

Go Back to Top

Overline text decoration.

Line-through text decoration.

Underline text decoration.

Overline and underline text decoration.

This paragraph has a solid style underline.

This paragraph has a double style underline.

This paragraph has a dotted style underline.

This paragraph has a dashed style underline.

This paragraph has a wavy style underline.

Text Transformation

Go Back to Top

This paragraph is text-transformed to uppercase.

This paragraph is text-transformed to lowercase.

This paragraph is text-transformed to capitalize.

Text Spacing

Go Back to Top

This paragraph used the text-indent property. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nam modi sunt, repudiandae amet dolorum architecto neque excepturi nihil quibusdam minus repellendus eaque velit assumenda. Impedit adipisci enim pariatur vitae quisquam.

This paragraph used the letter-spacing property with width of 5px. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nam modi sunt, repudiandae amet dolorum architecto neque excepturi nihil quibusdam minus repellendus eaque velit assumenda. Impedit adipisci enim pariatur vitae quisquam.

This paragraph used the letter-spacing property with width of 2px. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nam modi sunt, repudiandae amet dolorum architecto neque excepturi nihil quibusdam minus repellendus eaque velit assumenda. Impedit adipisci enim pariatur vitae quisquam.

This paragraph used the letter-spacing property with width of -1px. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nam modi sunt, repudiandae amet dolorum architecto neque excepturi nihil quibusdam minus repellendus eaque velit assumenda. Impedit adipisci enim pariatur vitae quisquam.

This paragraph used the line-height property with height of 0.8. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nam modi sunt, repudiandae amet dolorum architecto neque excepturi nihil quibusdam minus repellendus eaque velit assumenda. Impedit adipisci enim pariatur vitae quisquam.

This paragraph used the line-height property with width of 1.8. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nam modi sunt, repudiandae amet dolorum architecto neque excepturi nihil quibusdam minus repellendus eaque velit assumenda. Impedit adipisci enim pariatur vitae quisquam.

This paragraph has default word-spacing.

This paragraph has 10px word-spacing.

This paragraph has -2px word-spacing.

This paragraph uses the property white-space with value of nowrap. The text will not wrap in the paragraph element. Lorem, ipsum dolor sit amet consectetur adipisicing elit. At cum beatae quos eaque natus similique fugit cumque ea, suscipit omnis optio iure! Fugit, molestias. Nam, quas illo. Sint, dolores perspiciatis.

Text Shadow

Go Back to Top

This paragraph has text-shadow property applied.

This paragraph has text-shadow property applied with color.

This paragraph has text-shadow property applied with color and blur.

This paragraph has text-shadow property applied with white text shadow style.

This paragraph has text-shadow property applied with red neon glow.

This paragraph has text-shadow property applied with red and blue neon glow.

This paragraph has text-shadow property applied with black, dark blue and blue neon glow on white text.

Go Back to Top